import React, { useEffect, useState } from 'react';
import { Menu } from 'antd';
import { Link } from 'umi';
import style from './Menu.less';

const routeUrl = ['/', '/query'];

const NavMenu: React.FC = () => {
  const [key, setKey] = useState('1');
  const { pathname } = window.location;
  useEffect(() => {
    routeUrl.forEach((i, index) => {
      if (pathname.indexOf(i) !== -1) {
        setKey(String(index));
      }
    });
  }, [pathname]);

  return (
    <Menu className={style.menu} selectedKeys={[key]} mode="horizontal">
      <Menu.Item key="0" className={style.item}>
        <Link to="/">总览</Link>
      </Menu.Item>
      <Menu.Item key="1" className={style.item}>
        <Link to="/query">查询</Link>
      </Menu.Item>
    </Menu>
  );
};

export default NavMenu;
